<template>
  <view class="lucky-wrap">
    <view class="lucky-scroll" ref="luckyScrollRef">
      
      <!-- 抽奖物品容器 -->
      <view class="lucky-scroll-wrap" ref="luckyScrollBoxRef">
        <view v-for="(item, index) in scrollList" :key="index" class="lucky-scroll-item" :style="{
          width: itemWidth + 'px',
        }">
          <slot :item="item" :index="index"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import luckyScroll from './luckyScroll.js'
const getStyle = (el, attr) => {
  if (el.currentStyle) {
    return el.currentStyle[attr]
  } else {
    // @ts-ignore
    return getComputedStyle(el, null)[attr]
  }
}
export default {
  name: 'luckyScroll',
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: []
    },
    visibleNum: {
      type: Number,
      default: 5
    },
    openAnimation: {
      type: Boolean,
      default: true
    },
    openSound: {
      type: Boolean,
      default: true
    },
    // 中奖
    luckyNum: {
      type: Number | undefined,
      default: undefined
    }
  },
  data () {
    return {
      itemWidth: 0,
      luckyDrawData: [],
      isAnimating: false,
      scrollList: [],
    }
  },
  computed: {
    luckyScrollData () {
      return this.dataList
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.luckyDataConfig(this.dataList)
    })
  },
  methods: {
    luckyDataConfig (vals) {
      this.$nextTick(() => {
        this.scrollList = luckyScroll.getLuckyScrollDataList({
          source: [...vals],
          total: 50,
          visibleNum: this.visibleNum
        })
        const luckyScrollRef = this.$refs.luckyScrollRef
        const tempW = parseInt(getStyle(luckyScrollRef?.$el, 'width'))
        this.itemWidth = tempW / this.visibleNum;
      })
    },
    onOpenBox (val, isOne) {
      this.$nextTick(() => {
        if (this.isAnimating) return
        this.isAnimating = true
        // 中奖结果
        const len = this.scrollList.length
        const index = val // || Math.floor(Math.random() * len)
        const openResults = this.scrollList?.[index]
        console.log(openResults, 'openResults')
        // 执行抽奖动画
        luckyScroll.startScroll({
          winningID: openResults?.id,
          winningIDs: this.scrollList?.map((item, index) => item.id),
          wrap: this.$refs.luckyScrollBoxRef?.$el,
          itemWidth: this.itemWidth,
          visibleItemCount: this.visibleNum,
          openAnimation: this.openAnimation,
          openSound: this.openSound,
          audioUriForStart: 'https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/64241724740343478.mp3',
          audioUriForEnd: 'https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/14871724740425058.mp3',
          isOne,
          completed: () => {
            this.isAnimating = false
            this.$emit('completed', openResults)
          }
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.lucky-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.lucky-scroll {
  // width: 100%;
  // height: 100%;
  background-color: transparent;
  // position: absolute;
  // left: 50%;
  // transform: translateX(-50%);
  overflow: hidden;
  box-shadow: #42425433 0 0 0 5px;

  .lucky-line {
    height: 100%;
    width: 2px;
    background-color: #dcae64;
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);

    &::before,
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: inherit;
      border-style: solid;
      border-width: 16px;
    }

    &::before {
      top: 0;
      border-color: #dcae64 transparent transparent transparent;
    }

    &::after {
      bottom: 0;
      border-color: transparent transparent #dcae64 transparent;
    }
  }

  .lucky-scroll-wrap {
    white-space: nowrap;
    height: inherit;
  }

  .lucky-scroll-item {
    display: inline-block;
    height: inherit;
    text-align: center;
    position: relative;

    img {
      width: 80%;
      height: auto;
      margin: 16px 0;
    }

    .chance {
      text-align: right;
      color: #b4b8cd;
    }

    .infos {
      text-align: left;
      letter-spacing: 1px;
    }

    .arms {
      font-size: 14px;
      color: #b4b8cd;
      margin-bottom: 4px;
    }

    .skins {
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
./luckyScroll